<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户信息</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="./css/sm.min.css">
    <link rel="stylesheet" href="./css/sm-extend.min.css">
   <link href="../css/flickerplate.css"  type="text/css" rel="stylesheet">
   <link href="../css/zukeKongjian.css" rel="stylesheet">
   <script src="../js/jquery-2.1.1.js"></script>
   
	<link rel="stylesheet" type="text/css" href="../css/style.css"/>
	<link rel="stylesheet" type="text/css" href="../css/weui/example.css">
	<link rel="stylesheet" type="text/css" href="../css/weui/weui.css" />
	<script type="text/ja   vascript" src="../js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
   
   <script src="../js/min/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
   <script src="../js/min/hammer-v2.0.3.min.js" type="text/javascript"></script>
   <script src="../js/min/flickerplate.min.js" type="text/javascript"></script>
   <script src="./js/zepto.js"></script>
	<script src="./js/sm.js" ></script>
	<script src="./js/jquery.form.js"></script>
	<style type="text/css">
	.to_page{
	  display: none;
	  width: 40%;
	  margin: 40px auto 0;
	  line-height: 42px;
	  background-color: rgb(8, 148, 236);
	  color: #fff;
	  border-radius: 8px;
	  font-size: 16px;
	  text-align: center;
	   float: right;
	   margin-right: 10px
	}
	.to_cancel{
	  display: none;
	  width: 40%;
	  margin: 10px auto 0;
	  line-height: 42px;
	  background-color: red;
	  color: #fff;
	  border-radius: 8px;
	  font-size: 16px;
	  text-align: center;
	  float: left;
	  margin-top: 41px;
	  margin-left: 10px
	}
	</style>
  </head>
  
  <body>
	  <header class="bar bar-nav">
	    <a class="button button-link button-nav pull-left" href="javaScript:history.go(-1)" data-transition='slide-out'>
	      <span class="icon icon-left"></span>
	      返回
	    </a>
	    <h1 class="title">用户信息</h1>
	  </header>
    
  <div class="content">
  <div class="toubu">
  <form method="post" enctype="multipart/form-data" id="form1">
    <ul>
    <li>
	    <img src="../images/touxiang.png" style="width: 60px;height: 58px;vertical-align: middle;" id="headimg">
    	<img  src="../images/edit.png" style="width: 28px;height: 28px;vertical-align: middle;" onclick="toEdit()" class="nosee">
    </li>
    <li><span id="name"></span></li>
    </ul>
    </div>

    <div class="list-block" >
    <ul>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">昵称</div>
          <div class="item-after nosee" id="nickName"></div>
          <input id="nickName_" type="text" style="border: 1px solid #d4cece;border-radius: 8px;display: none;width: 52%" class="toedit"/>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">真实姓名</div>
          <div class="item-after" id="nickName"></div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">手机号码</div>
          <div class="item-after" id="phone"></div>
        </div>
      </li>
      <li class="item-content" onclick="toLink('findPassword.html', this)">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">修改密码</div>
          <div class="item-after" ></div>
        </div>
      </li>
      <li class="item-content toedit" onclick="toupload()" style="display: none">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">修改头像</div>
          <div class="item-after" ></div>
        </div>
      </li>
	 <input type="file" id="upload" style="display: none" name="headImg"/>
    </ul>
    </form>
	    <a class="to_cancel toedit" >取消</a>
	    <a href="javaScript:sureBtn()" class="to_page toedit" id="sureBtn">确定</a>
	    
	   
</div>
<!-- <jsp:include page="./footer.jsp"></jsp:include> -->
<script type="text/javascript">
var storage=window.localStorage;
var userId = $.getUrlParam("userId");
window.$$=window.Zepto = Zepto;

$(function() {
	getUserInfo();
});

function  getUserInfo(){
	
	$$.showPreloader("加载中");
	$.ajax({
		type : "POST",
		dataType : 'json',
		url : "../user/getById",
		data : {
			userId: userId,
			nickName : $("#nickName_").val()
		},
		success : function(data) {
			$$.hidePreloader();
			var html="";
			if(data!=null ){
				var flag="";
				if(data.flag==0) flag="租客";
				if(data.flag==1) flag="房东";
				if(data.flag==2) flag="管家";
				$("#nickName").text( (data.nickName||"")+"("+flag+")");
				$("#realName").text(data.realName);
				$("#nickName_").val(data.nickName);
				$("#phone").text(data.phone);
				$("#headimg").attr("src", (data.headImg||"../images/headboy.png") );
			}else{
				
			}
			
		},
		error: function(){
			$$.hidePreloader();
		}
	});
	
}
function toLink(txt,tagrt) {
	document.location.href = "./" + txt;
}
function toEdit(){
	$(".toedit").show();
	$(".nosee").hide();
}
function toupload(){
	 document.getElementById("upload").click();
}
function sureBtn(){
	 $$.showPreloader('正在上传');
		$('#form1').ajaxSubmit(  
		        {
		            url: '../user/updateUserInfo',
		            type: 'post',
		            dataType: 'json',
		            data :{			
		            	userId: userId,
		    			nickName : $("#nickName_").val()
		    			},
		            beforeSubmit: function () {},
		            success: function (data) {
		            	$$.hidePreloader();
		                if(data.success){
		                	alert("上传成功");
		                	$(".toedit").hide();
		                	$(".nosee").show();
		    				getUserInfo();
		                }
		            },
		            error : function (err){
		            	alert("上传失败");
		            	$$.hidePreloader();
		            },
		            clearForm: false,//禁止清楚表单
		            resetForm: false //禁止重置表单
		        });
}
$(".to_cancel").click(function(){
	$(".toedit").hide();
	$(".nosee").show();
});

 $(document).on('change', '#upload', function () {
	    function getObjectURL(file) {
	        var url = null;
	        if (window.createObjectURL != undefined) { // basic
	            url = window.createObjectURL(file);
	        } else if (window.URL != undefined) { // mozilla(firefox)
	            url = window.URL.createObjectURL(file);
	        } else if (window.webkitURL != undefined) { // webkit or chrome
	            url = window.webkitURL.createObjectURL(file);
	        }
	        return url;
	    }
	    var objUrl = getObjectURL(this.files[0]);
		$("#headimg").attr("src",objUrl);
	})
</script>
  </body>
</html>